<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <meta http-equiv="x-ua-compatible" content="ie=edge">
    <title>德育教育</title>
    <script type="text/javascript" src="../static/js/jquery.min.js"></script>
    <script type="text/javascript" src="../static/js/script.js"></script>
    <script type="text/javascript" src="../static/js/template.js"></script>
    <link rel="stylesheet" href="../static/font-awesome-4.7.0/css/font-awesome.min.css">
    <link rel="stylesheet" href="../static/css/style.css">
    <style>
        .headerbs{
            box-shadow:  0 8px 6px -6px #ddd;
        }
        .active{
            color:#FD7368;
            font-weight: bold;
        }
        .maincontent{
            margin-top: 70px;
            padding-bottom: 70px;
        }
        .searchbox{
            position: relative;
            text-align: right;
            padding: 10px 0;
        }
        input{
            border: 0;
            border-radius: 25px 0 0 20px;
            font-size: 15px;
            outline: none;
        }
        .search{
            width: 260px;
            border: 2px solid #eee;
            position: absolute;
            border-radius: 25px;
            right: 0;
        }
        .keyword{
            padding: 10px 15px;
            background: #9EBF3C;
            display: inline-block;
            border-radius: 0 20px 20px 0;
            cursor: pointer;
        }
        .subtitle{
            width: 80%;
            padding: 60px 0;
            margin: 0 auto;
            align-items: center;
            display: flex;
            justify-content: space-between;
        }
        .items{
            font-size: 30px;
            color:#444;
            cursor: pointer;
            font-family: serif;
        }
        .itemactive{
            background: #9EBF3C;
            color: #FFF;
            padding: 5px 25px;
            border-radius: 25px;
        }
        .category{
            background: #F0F0F0;
            display: flex;
            padding: 10px 30px;
        }
        .ctitle{
            padding: 15px 0;
            flex: 1;
        }
        .clist{
            display: flex;
            flex-wrap: wrap;
            flex: 6;
        }
        .clist div{
            color: #C4C4C4;
            padding: 10px 0;
            width: 25%;
            cursor: pointer;
        }
        .editonline,.download,.webpage{
            display: none;
        }
        .videolist,.livelist{
            display: flex;
            flex-wrap: wrap;
            justify-content: space-between;
            margin-top: 20px;
        }
        .videoitem{
            width: 23.5%;
            margin: 10px 0;
            cursor: pointer;
        }
        .downloaditem{
            width: 23.5%;
            margin: 10px 0;
            border: 1px solid #DCDCDC;
            position: relative;
        }
        .selectdownload{
            position: absolute;
            right: 10px;
            top: 5px;
        }
        .select{
            font-size: 35px;
            color: #777;
            cursor: pointer;
        }
        .videocover,.livecover{
            background-image: url("../static/img/i8.png");
            position: relative;
            height: 0;
            overflow: hidden;
            margin: 0;
            padding-bottom: 175px;
            background-position: center;
            background-size: cover;
            background-repeat: no-repeat;
        }
        .downloadcover{
            width: 179px;
            background-image: url("../static/img/download.png");
            position: relative;
            height: 0;
            overflow: hidden;
            margin: 0 auto;
            padding-bottom: 179px;
            background-position: center;
            background-size: cover;
            background-repeat: no-repeat;
        }
        .videoinfo,.liveinfo{
            line-height: 27px;
            border: 1px solid #DCDCDC;
            border-top: 0;
            padding: 5px 15px;
        }
        .downloadinfo{
            line-height: 27px;
            padding: 5px 15px;
        }
        .vtitle,.ltitle{
            color:#575757
        }
        .vdesc,.ldesc{
            color:#777;
            font-size: 15px;
            display: flex;
            justify-content: space-between;
        }
        .fa-play-circle-o{
            font-size: 20px;
        }
        .fa-check-square{
            color:#9EBF3C;
        }
        .allcelect{
            display: flex;
            align-items: center;
            font-size: 20px;
            color: #666;
            font-family: serif;
            padding: 15px 0;
        }
        .allcelect p{
            cursor: pointer;
        }

        .layerbox{
            display: none;
        }
        .layer{
            position: fixed;
            top:0;
            bottom:0;
            left: 0;
            right:0;
            background: rgba(7,17,27,.6);
            z-index: 99999;
            display: flex;
            align-items: center;
        }
        .boxshow{
            text-align: center;
            padding: 20px 0;
            border-radius: 10px;
            width: 30%;
            background: #FFF;
            margin: 0 auto;
        }
        .tologin{
            padding: 10px 0;
        }
        .cancel,.loginbtn{
            margin: 10px 10px;
            display: inline-block;
            min-width: 70px;
            font-size: 12px;
            padding: 5px 10px;
            cursor: pointer;
            border-radius: 2px;
            background: #777;
            color: #FFF;
        }
        .loginbtn{
            background: #9EBF3C;
        }
    </style>
</head>
<body>
<div class="wrapper">
    <div class="header headerbs">
        <div class="glogo"></div>
        <div class="nav">
            <div onclick="window.location.href='../index/index.html?type=index'">首页</div>
            <div class="active">资源在线</div>
            <div onclick="window.location.href='../headmaster/index.html?type=teacher'">班主任工作</div>
            <div onclick="window.location.href='../classroom/index.html?type=classroom'">德育讲堂</div>
            <div onclick="window.location.href='../activity/index.html?type=activity'">活动专区</div>
        </div>
    </div>
    <div class="maincontent">
        <div class="searchbox">
            <div class="search">
                <input type="text" name="keyword" value="" placeholder="搜索您想要的视频">
                <span class="keyword"><i style="color:#FFF;" class="fa fa-search"></i></span>
            </div>
        </div>
        <div class="subtitle">
            <div class="items itemactive" data-type="video">视频展播</div>
            <div class="items" data-type="edit">在线编辑</div>
            <div class="items" data-type="download">视频下载</div>
            <div class="items" data-type="webpage">专题网页</div>
        </div>
        <div class="category">
            <div class="ctitle">全部视频</div>
            <div class="clist">
                <div>爱国</div>
                <div>环保</div>
                <div>环保</div>
                <div>环保</div>
                <div>环保</div>
                <div>环保</div>
                <div>环保</div>
            </div>
        </div>
        <!-- 模块内容区域 -->
        <div class="boxcontent">
            <!--视频展播视频列表-->
            <div class="videobox">
                <div class="videolist">
                    <div class="videoitem">
                        <div class="videocover">&nbsp;</div>
                        <div class="videoinfo">
                            <p class="vtitle outline1">视频标题单行显示</p>
                            <p class="vdesc outline1"><span>视频简介</span><span><i class="fa fa-play-circle-o"></i></span></p>
                        </div>
                    </div>
                    <div class="videoitem">
                        <div class="videocover">&nbsp;</div>
                        <div class="videoinfo">
                            <p class="vtitle outline1">视频标题单行显示</p>
                            <p class="vdesc outline1"><span>视频简介</span><span><i class="fa fa-play-circle-o"></i></span></p>
                        </div>
                    </div>
                    <div class="videoitem">
                        <div class="videocover">&nbsp;</div>
                        <div class="videoinfo">
                            <p class="vtitle outline1">视频标题单行显示</p>
                            <p class="vdesc outline1"><span>视频简介</span><span><i class="fa fa-play-circle-o"></i></span></p>
                        </div>
                    </div>
                    <div class="videoitem">
                        <div class="videocover">&nbsp;</div>
                        <div class="videoinfo">
                            <p class="vtitle outline1">视频标题单行显示</p>
                            <p class="vdesc outline1"><span>视频简介</span><span><i class="fa fa-play-circle-o"></i></span></p>
                        </div>
                    </div>
                    <div class="videoitem">
                        <div class="videocover">&nbsp;</div>
                        <div class="videoinfo">
                            <p class="vtitle outline1">视频标题单行显示</p>
                            <p class="vdesc outline1"><span>视频简介</span><span><i class="fa fa-play-circle-o"></i></span></p>
                        </div>
                    </div>
                    <div class="videoitem">
                        <div class="videocover">&nbsp;</div>
                        <div class="videoinfo">
                            <p class="vtitle outline1">视频标题单行显示</p>
                            <p class="vdesc outline1"><span>视频简介</span><span><i class="fa fa-play-circle-o"></i></span></p>
                        </div>
                    </div>
                    <div class="videoitem">
                        <div class="videocover">&nbsp;</div>
                        <div class="videoinfo">
                            <p class="vtitle outline1">视频标题单行显示</p>
                            <p class="vdesc outline1"><span>视频简介</span><span><i class="fa fa-play-circle-o"></i></span></p>
                        </div>
                    </div>
                    <div class="videoitem">
                        <div class="videocover">&nbsp;</div>
                        <div class="videoinfo">
                            <p class="vtitle outline1">视频标题单行显示</p>
                            <p class="vdesc outline1"><span>视频简介</span><span><i class="fa fa-play-circle-o"></i></span></p>
                        </div>
                    </div>
                    <div class="videoitem">
                        <div class="videocover">&nbsp;</div>
                        <div class="videoinfo">
                            <p class="vtitle outline1">视频标题单行显示</p>
                            <p class="vdesc outline1"><span>视频简介</span><span><i class="fa fa-play-circle-o"></i></span></p>
                        </div>
                    </div>
                    <div class="videoitem">
                        <div class="videocover">&nbsp;</div>
                        <div class="videoinfo">
                            <p class="vtitle outline1">视频标题单行显示</p>
                            <p class="vdesc outline1"><span>视频简介</span><span><i class="fa fa-play-circle-o"></i></span></p>
                        </div>
                    </div>
                    <div class="videoitem">
                        <div class="videocover">&nbsp;</div>
                        <div class="videoinfo">
                            <p class="vtitle outline1">视频标题单行显示</p>
                            <p class="vdesc outline1"><span>视频简介</span><span><i class="fa fa-play-circle-o"></i></span></p>
                        </div>
                    </div>
                    <div class="videoitem">
                        <div class="videocover">&nbsp;</div>
                        <div class="videoinfo">
                            <p class="vtitle outline1">视频标题单行显示</p>
                            <p class="vdesc outline1"><span>视频简介</span><span><i class="fa fa-play-circle-o"></i></span></p>
                        </div>
                    </div>

                </div>
            </div>
            <!--在线编辑-->
            <div class="editonline">
                <p>待定...</p>
            </div>
            <!--视频下载-->
           <div class="download">
               <div class="videolist">
                   <div class="downloaditem">
                       <span class="selectdownload"><i class="fa fa-square-o select"></i></span>
                       <div class="downloadcover">&nbsp;</div>
                       <div class="downloadinfo">
                           <p class="vtitle outline1">视频标题单行显示</p>
                           <p class="vdesc outline1"><span>共15个</span><span>视频来源：爱奇艺</span></p>
                       </div>
                   </div>
                   <div class="downloaditem">
                       <span class="selectdownload"><i class="fa fa-square-o select"></i></span>
                       <div class="downloadcover">&nbsp;</div>
                       <div class="downloadinfo">
                           <p class="vtitle outline1">视频标题单行显示</p>
                           <p class="vdesc outline1"><span>共15个</span><span>视频来源：爱奇艺</span></p>
                       </div>
                   </div>
                   <div class="downloaditem">
                       <span class="selectdownload"><i class="fa fa-square-o select"></i></span>
                       <div class="downloadcover">&nbsp;</div>
                       <div class="downloadinfo">
                           <p class="vtitle outline1">视频标题单行显示</p>
                           <p class="vdesc outline1"><span>共15个</span><span>视频来源：爱奇艺</span></p>
                       </div>
                   </div>
                   <div class="downloaditem">
                       <span class="selectdownload"><i class="fa fa-square-o select"></i></span>
                       <div class="downloadcover">&nbsp;</div>
                       <div class="downloadinfo">
                           <p class="vtitle outline1">视频标题单行显示</p>
                           <p class="vdesc outline1"><span>共15个</span><span>视频来源：爱奇艺</span></p>
                       </div>
                   </div>
                   <div class="downloaditem">
                       <span class="selectdownload"><i class="fa fa-square-o select"></i></span>
                       <div class="downloadcover">&nbsp;</div>
                       <div class="downloadinfo">
                           <p class="vtitle outline1">视频标题单行显示</p>
                           <p class="vdesc outline1"><span>共15个</span><span>视频来源：爱奇艺</span></p>
                       </div>
                   </div>
                   <div class="downloaditem">
                       <span class="selectdownload"><i class="fa fa-square-o select"></i></span>
                       <div class="downloadcover">&nbsp;</div>
                       <div class="downloadinfo">
                           <p class="vtitle outline1">视频标题单行显示</p>
                           <p class="vdesc outline1"><span>共15个</span><span>视频来源：爱奇艺</span></p>
                       </div>
                   </div>
                   <div class="downloaditem">
                       <span class="selectdownload"><i class="fa fa-square-o select"></i></span>
                       <div class="downloadcover">&nbsp;</div>
                       <div class="downloadinfo">
                           <p class="vtitle outline1">视频标题单行显示</p>
                           <p class="vdesc outline1"><span>共15个</span><span>视频来源：爱奇艺</span></p>
                       </div>
                   </div>
                   <div class="downloaditem">
                       <span class="selectdownload"><i class="fa fa-square-o select"></i></span>
                       <div class="downloadcover">&nbsp;</div>
                       <div class="downloadinfo">
                           <p class="vtitle outline1">视频标题单行显示</p>
                           <p class="vdesc outline1"><span>共15个</span><span>视频来源：爱奇艺</span></p>
                       </div>
                   </div>


               </div>
               <div class="allcelect">
                   <p class="select_all"><span class="fa fa-square-o"></span>全选</p>
                   &nbsp;&nbsp;
                   <p id="download"><span class="fa fa-cloud-download"></span>下载</p>
               </div>
           </div>
            <!--专题网页-->
            <div class="webpage">
                <p>内容待定......</p>
            </div>
        </div>
    </div>
</div>

<!--提示-->
<div class="layerbox">
    <div class="layer">
        <div class="boxshow">
            <p style="font-size: 14px;color: #666;">登录后才能下载本资源哦</p>
            <p class="tologin"><span onclick="$('.layerbox').hide();" class="cancel">取消</span><span onclick="$('.layerbox').hide();" class="loginbtn">立即登录</span></p>
        </div>
    </div>
</div>

<div class="footer">
    <p>主办单位:央馆德育资源服务平台&nbsp;&nbsp;&nbsp;&nbsp;协办单位:安徽安教德育资源服务平台</p>
    <p>COPYRIGHT2020 YANGGUANG. ALL RIGHTS RESERVED.</p>
</div>
</body>
</html>

<script>
    var token = '';
    $(function(){
        $(".items").click(function () {
            var t = $(this).data('type');
            if(t == 'video'){
                $(".category").show();
                $(".videobox").show();
                $(".editonline").hide();
                $(".download").hide();
                $(".webpage").hide();
            }else if(t == 'edit'){
                $(".category").hide();
                $(".videobox").hide();
                $(".editonline").show();
                $(".download").hide();
                $(".webpage").hide();
            }else if(t == 'download') {
                $(".category").show();
                $(".videobox").hide();
                $(".editonline").hide();
                $(".download").show();
                $(".webpage").hide();
            }else{
                $(".category").hide();
                $(".videobox").hide();
                $(".editonline").hide();
                $(".download").hide();
                $(".webpage").show();
            }
            $(".items").removeClass('itemactive') ;
            $(this).addClass('itemactive') ;
        });

        $(document).on("click",".videoitem",function(){
            window.location.href="./videodetail.html?title=环保视频";
        });

        //搜索
        $(".keyword").click(function () {
           var keywords = $.trim($("input[name='keyword']").val());
           if(!keywords){
               alert('请输入有效关键字');
               return;
           }
        });

        //单个选择
        $(".selectdownload").click(function () {
            if($(this).find('i').hasClass('fa-square-o')){
                $(this).find('i').removeClass("fa-square-o") ;
                $(this).find('i').addClass("fa-check-square");
                var select_len = $(".fa-check-square").length;
                var total = $(".downloaditem").length;
               if(select_len == total){
                   //单个选择选中监听全选状态取消
                   $(".select_all").find('span').removeClass("fa-square-o") ;
                   $(".select_all").find('span').addClass("fa-check-square") ;
               }

            }else{
                $(this).find('i').addClass("fa-square-o") ;
                $(this).find('i').removeClass("fa-check-square");
                //单个选择取消监听全选状态取消
                $(".select_all").find('span').addClass("fa-square-o") ;
                $(".select_all").find('span').removeClass("fa-check-square") ;
            };
        });

        //全选
        $(".select_all").click(function () {
            if($(this).find('span').hasClass('fa-square-o')){
                $(this).find('span').removeClass("fa-square-o") ;
                $(this).find('span').addClass("fa-check-square");
                $(".selectdownload i").removeClass("fa-square-o") ;
                $(".selectdownload i").addClass("fa-check-square");

            }else{
                $(this).find('span').addClass("fa-square-o") ;
                $(this).find('span').removeClass("fa-check-square");
                $(".selectdownload i").addClass("fa-square-o") ;
                $(".selectdownload i").removeClass("fa-check-square");
            };
        });

        //下载
        $("#download").click(function () {
            var len = $(".fa-check-square").length;
            if(!len){
                alert('请选择要下载的视频');
            }else{
                if(!token){
                    $(".layerbox").show();
                }
            }


        });
    });
</script>